<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-button>默认按钮</fu-button>
        <fu-button type="primary">主要按钮</fu-button>
        <fu-button type="success">成功按钮</fu-button>
        <fu-button type="warning">警告按钮</fu-button>
        <fu-button type="danger">错误按钮</fu-button>
      </view>
    </view>
    
    <!-- 朴素按钮 -->
    <view class="demo-block">
      <view class="demo-block__title">朴素按钮</view>
      <view class="demo-block__content">
        <fu-button plain>朴素按钮</fu-button>
        <fu-button type="primary" plain>主要按钮</fu-button>
        <fu-button type="success" plain>成功按钮</fu-button>
      </view>
    </view>
    
    <!-- 圆角按钮 -->
    <view class="demo-block">
      <view class="demo-block__title">圆角按钮</view>
      <view class="demo-block__content">
        <fu-button round>圆角按钮</fu-button>
        <fu-button type="primary" round>主要按钮</fu-button>
      </view>
    </view>
    
    <!-- 禁用状态 -->
    <view class="demo-block">
      <view class="demo-block__title">禁用状态</view>
      <view class="demo-block__content">
        <fu-button disabled>禁用按钮</fu-button>
        <fu-button type="primary" disabled>禁用按钮</fu-button>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="demo-block">
      <view class="demo-block__title">加载状态</view>
      <view class="demo-block__content">
        <fu-button loading>加载中...</fu-button>
        <fu-button type="primary" loading>加载中...</fu-button>
      </view>
    </view>
    
    <!-- 按钮尺寸 -->
    <view class="demo-block">
      <view class="demo-block__title">按钮尺寸</view>
      <view class="demo-block__content">
        <fu-button size="large" type="primary">大号按钮</fu-button>
        <fu-button type="primary">普通按钮</fu-button>
        <fu-button size="small" type="primary">小型按钮</fu-button>
        <fu-button size="mini" type="primary">迷你按钮</fu-button>
      </view>
    </view>

    <!-- 块级按钮 -->
    <view class="demo-block">
        <view class="demo-block__title">块级按钮</view>
        <view class="demo-block__content">
          <fu-button block type="primary">块级按钮</fu-button>
          <fu-button block type="success">块级按钮</fu-button>
          <fu-button block type="warning">块级按钮</fu-button>
          <fu-button block type="danger">块级按钮</fu-button>
        </view>
      </view>
  </view>
</template>

<script>
/**
 * Button 按钮示例
 */
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    .fu-button {
      margin: 10rpx;
    }
  }
}
</style> 